<template>
    <div class="w-100">
        <div class="flex py-2">
            <div class="label">状态</div>
            <div class="flex-1">
                <el-switch v-model="value.state" :active-value="1" :inactive-value="0" active-text="开启"
                    inactive-text="关闭" style="--el-switch-on-color: var(--el-color-success);" inline-prompt />
                <div class="text">通知开关，开启或关闭该通知</div>
                <div class="text" v-if="scene && scene.length > 0">通知场景：{{ scene.join('、') }}</div>
            </div>
        </div>
        <div v-if="value.state">
            <div v-if="voice_template">
                <div class="flex py-2">
                    <div class="label">电话模板ID</div>
                    <div class="flex-1">
                        <el-input type="text" v-model="value.voice_template" @change="updateValue" />
                        <div class="text">电话模板：<span class="link" @click="copyText(voice_template)">{{ voice_template
                                }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex py-2">
                    <div class="label">电话通知</div>
                    <div class="flex-1">
                        <el-tag v-for="(mobile, index) in value.voice_mobile" :key="index" class="mx-1" closable
                            :disable-transitions="false" @close="removeVoiceMobile(index)">
                            {{ mobile }}
                        </el-tag>
                        <el-input v-if="inputVoiceVisible" ref="InputRef" v-model="voiceMobileValue"
                            class="ml-1 w-100px" @keyup.enter="addVoiceMobile" @blur="addVoiceMobile" maxlength="11" />
                        <el-button v-else @click="showVoiceInput" type="primary" plain
                            class="ml-1 w-100px">添加手机号</el-button>
                        <div class="text">不添加手机号则不通知</div>
                    </div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">短信模板ID</div>
                <div class="flex-1">
                    <el-input type="text" v-model="value.sms_template" @change="updateValue" />
                    <div class="text">短信模板：<span class="link" @click="copyText(sms_template)">{{ sms_template }}</span>
                    </div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">短信通知</div>
                <div class="flex-1">
                    <el-tag v-for="(mobile, index) in value.mobile" :key="index" class="mx-1" closable
                        :disable-transitions="false" @close="removeMobile(index)">
                        {{ mobile }}
                    </el-tag>
                    <el-input v-if="inputVisible" ref="InputRef" v-model="mobileValue" class="ml-1 w-100px"
                        @keyup.enter="addMobile" @blur="addMobile" maxlength="11" />
                    <el-button v-else @click="showInput" type="primary" plain class="ml-1 w-100px">添加手机号</el-button>
                    <div class="text">不添加手机号则不通知</div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">公众号通知</div>
                <div class="flex-1">
                    <div class="flex">
                        <el-input v-model="wxUser.nickname" class="flex-1" placeholder="昵称" />
                        <el-input v-model="wxUser.openid" class="flex-1 mx-1" placeholder="openid" />
                        <el-button type="success" plain @click="addWxUser" class="w-100px">添加微信用户</el-button>
                    </div>
                    <div class="text">不添加微信用户则不通知</div>
                    <el-table :data="value.wx" style="width: 100%" border>
                        <el-table-column prop="nickname" label="昵称" width="150" />
                        <el-table-column prop="openid" label="openid" />
                        <el-table-column fixed="right" label="操作" width="80">
                            <template #default="scope">
                                <el-button link type="danger" size="small"
                                    @click="removeWxUser(scope.$index)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            modelValue: {
                type: Object,
                default: () => ({})
            },
            sms_template: {
                type: String,
                default: ''
            },
            voice_template: {
                type: String,
                default: ''
            },
            scene: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                inputVisible: false,
                mobileValue: '',
                inputVoiceVisible: false,
                voiceMobileValue: '',
                wxUser: {
                    nickname: '',
                    openid: '',
                },
                value: {
                    state: 1,
                    sms_template: '',
                    voice_template: '',
                    voice_mobile: [],
                    mobile: [],
                    wx: [],
                },
            };
        },
        created() {
            this.value = this.modelValue;
            if(!this.value.voice_mobile){
                this.value.voice_mobile = [];
            }
        },
        methods: {
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.InputRef.focus();
                });
            },
            addMobile() {
                if (this.mobileValue) {
                    if (this.value.mobile.indexOf(this.mobileValue) === -1) {
                        this.value.mobile.push(this.mobileValue);
                        this.updateValue();
                    }
                }
                this.mobileValue = '';
                this.inputVisible = false;
            },
            removeMobile(index) {
                this.value.mobile.splice(index, 1);
                this.updateValue();
            },
            showVoiceInput() {
                this.inputVoiceVisible = true;
                this.$nextTick(_ => {
                    this.$refs.InputRef.focus();
                });
            },
            addVoiceMobile() {
                if (this.voiceMobileValue) {
                    if (this.value.voice_mobile.indexOf(this.voiceMobileValue) === -1) {
                        this.value.voice_mobile.push(this.voiceMobileValue);
                        this.updateValue();
                    }
                }
                this.voiceMobileValue = '';
                this.inputVoiceVisible = false;
            },
            removeVoiceMobile(index) {
                this.value.voice_mobile.splice(index, 1);
                this.updateValue();
            },
            addWxUser() {
                if (this.wxUser.nickname && this.wxUser.openid) {
                    if (this.value.wx.indexOf(this.wxUser) === -1) {
                        this.value.wx.push(this.wxUser);
                        this.updateValue();
                    }
                }
                this.wxUser = {
                    nickname: '',
                    openid: '',
                };
            },
            removeWxUser(index) {
                this.value.wx.splice(index, 1);
                this.updateValue();
            },
            updateValue() {
                this.$emit('update:modelValue', this.value);
            },
            copyText(text) {
                try {
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(text).then(_ => {
                            this.$useMessage('已复制', 'success');
                        })
                    } else {
                        let input = document.createElement('input');
                        input.value = text;
                        document.body.appendChild(input);
                        input.select();
                        document.execCommand('Copy');
                        input.remove();
                        this.$useMessage('已复制', 'success');
                    }
                } catch (error) {
                    return this.$useMessage(error.message, 'error');
                }
            },
        },
    };
</script>
<style lang="scss" scoped>
    .w-100 {
        width: 50vw;
    }

    .text {
        color: rgb(102, 102, 102);
        padding: 5px 0px 0px;
        font-size: 12px;
    }

    .link {
        color: var(--el-color-primary);
        cursor: pointer;
    }

    .label {
        width: 100px;
        text-align: right;
        padding-right: 10px;
    }

    .mx-1,
    .ml-1 {
        margin-left: 5px
    }

    .mx-1,
    .mr-1 {
        margin-right: 5px
    }

    .w-100px {
        width: 120px;
    }

    .py-2 {
        padding: 10px 0;
    }

    .flex-1 {
        flex: 1;
    }
</style>